<template>
  <view class="uni-container">
    <view class="uni-navbar-top">
      <uni-nav-bar style="padding-top: 30rpx;"
                   left-icon="left" title="人员销售统计" @clickLeft="back"
                   background-color="" @clickRight="openFilterPopup" right-icon="more-filled" height="90rpx"/>
    </view>
    <!--标签区-->
    <view class="uni-padding-wrap uni-common-mt">
      <my-segmented-control code="2" v-model="classifyName" @clickItem="clickSegmented"></my-segmented-control>
    </view>
    <view class="list-container">
      <a-j-list :api-url="this.url.list" order="asc" column="quantity" ref="listRef" :is-load-data="false"
                :is-expanded="true"
                :height="100" :is-total-row="true" group-by="goods_id" :columns="columns">
        <template #item="{item}">
          <staff-list-view :item="item"
                           :classify-name="classifyName"
                           :classify-range="classifyRange"
                           :shop-name="shopDataIndex>0?shopData[shopDataIndex]:''"
                           :time-range="timeRange"></staff-list-view>
        </template>
      </a-j-list>
    </view>
    <drag-icon :window-height="windowWidth" :window-width="windowHeight" @click="openPopup"></drag-icon>
    <uni-popup ref="popup" type="center">
      <view class="popup-wrapper">
        <view class="popup-content" @click="openPage('goods')">
          <text class="popup-text">查看商品统计</text>
        </view>
        <view class="popup-content" @click="openPage('shop')">
          <text class="popup-text">查看店铺统计</text>
        </view>
      </view>
    </uni-popup>
    <!--筛选弹出层-->
    <uni-popup ref="filterPopup" type="center" :mask-click="true">
      <view class="centered-popup">
        <view class="clear-container">
          <text class="label required" @click="handleClear">清空</text>
        </view>
        <view class="time-range">
          <text class="label required">选择分类</text>
          <a-data-picker :url="'classify/classifyNoPageList?classifyName='+this.classifyName" v-model="classifyRange"/>
        </view>
        <!-- 时间选择区域 -->
        <view class="time-range">
          <!-- 时间段选择器 -->
          <uni-datetime-picker v-model="timeRange" type="daterange"/>
        </view>
        <view class="time-range">
          <text class="label required">选择门店</text>
          <view class="input-container">
            <picker class="form-picker" :value="shopDataIndex" :range="shopData" @click="showShop"
                    @change="onColumnChange">
              <view class="picker-content">
                <text class="value-text">{{ shopData[shopDataIndex] || '请选择门店' }}</text>
                <uni-icons type="arrowright" size="18" color="#999"></uni-icons>
              </view>
            </picker>
          </view>
        </view>
        <!-- 操作按钮 -->
        <view class="action-buttons">
          <button class="cancel-btn" @click="closePopup">取消</button>
          <button class="confirm-btn" @click="confirmFilter">确认</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
import AJList from "../components/list/aList.vue";
import ADataPicker from "../components/a-data-picker.vue";
import DragIcon from "../components/functional/icon/dragIcon.vue";
import UniPopup from "../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import UniDatetimePicker
  from "../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
import UniNavBar from "../uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue";
import UniIcons from "../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import UniSegmentedControl
  from "../uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue";
import {JeecgListMixin} from "../utils/JeecgListMixin";
import StaffListView from "../components/list/view/staffListView.vue";
import MySegmentedControl from "../components/functional/control/mySegmentedControl.vue";

export default {
  name: "staffList",
  mixins: [JeecgListMixin],
  components: {
    MySegmentedControl,
    StaffListView,
    UniIcons,
    ADataPicker,
    UniNavBar,
    UniDatetimePicker,
    UniPopup,
    DragIcon,
    UniSegmentedControl,
    AJList,
  },
  data() {
    return {
      classifyName: "",
      shopDataIndex: 0,
      shopData: ["请选择"],
      classifyRange: [],
      timeRange: [], // 存储时间段[开始日期,结束日期]
      model: {},
      windowWidth: 0,
      windowHeight: 0,
      popupTitle: "",
      url: {
        list: "api/boss/staffList",
        shopList: "shop/noPageList",
      },
      page: {
        goods: "goodsList",
        shop: "saleList"
      },
      shopList: [],
      columns: [
        {
          title: '名称',
          align: 'center',
        },
        {
          title: '本期',
          align: 'center',
          text: "quantity",
          iconU: ['../static/s.png', '../static/colors.png'],
          iconD: ['../static/x.png', '../static/colorc.png'],
        },
        {
          title: '同期',
          align: 'center',
          text: "samePeriod",
          iconU: ['../static/s.png', '../static/colors.png'],
          iconD: ['../static/x.png', '../static/colorc.png'],
        },
        {
          title: '同比',
          align: 'center',
          text: "quantity",
          iconU: ['../static/s.png', '../static/colors.png'],
          iconD: ['../static/x.png', '../static/colorc.png'],
        },
      ]
    }
  },
  watch: {
    classifyName: {
      handler(newVal) {
        if (this.$refs.listRef && newVal) {
          this.$refs.listRef.queryParam.classifyName = this.classifyName
          this.$refs.listRef.loadData(1)
        }
      },
      immediate: true // 确保初始化同步
    },
  },
  methods: {
    /**
     * 查询
     * @param e
     */
    clickSegmented(e) {
      this.$refs.listRef.queryParam.classifyName  = e.name
      this.$refs.listRef.searchQuery()
    },
    /**
     * 打开弹出层
     * @param child
     */
    openPopup() {
      this.$refs.popup.open()
    },
    openPage(page) {
      this.$refs.popup.close()
      if (page == "goods") {
        uni.redirectTo({
          url: this.page.goods+"?classifyName="+this.classifyName,
        })
      } else {
        uni.redirectTo({
          url: this.page.shop+"?classifyName="+this.classifyName,
        })
      }
    },
    /**
     * 往来单位选择事件
     * @param e
     */
    onColumnChange(e) {
      this.shopDataIndex = e.target.value
    },
    showShop() {
      getAction(this.url.shopList).then(res => {
        if (res.success) {
          const temp = res.result.map(item => (item.shopName))
          this.shopData = ["请选择", ...temp]
        }
      })
    },
    //打开弹出层
    openFilterPopup() {
      this.$refs.filterPopup.open()
    },
    //关闭弹出层
    closePopup() {
      this.$refs.filterPopup.close()
    },
    back() {
      uni.navigateBack()
    },
    //清空筛选
    handleClear() {
      this.$delete(this.$refs.listRef.queryParam, "startTime")
      this.$delete(this.$refs.listRef.queryParam, "endTime")
      this.$delete(this.$refs.listRef.queryParam, "classifyId")
      this.$delete(this.$refs.listRef.queryParam, "ShopName")
      this.shopDataIndex = 0;
      this.classifyRange = [];
      this.timeRange = []
      this.$refs.listRef.loadData(1)
      this.$refs.filterPopup.close();
    },
    /**
     * 确定筛选
     */
    confirmFilter() {
      if (this.timeRange.length == 2) {
        const [startDate, endDate] = this.timeRange;
        if (new Date(startDate) > new Date(endDate)) {
          uni.showToast({title: '结束时间不能早于开始时间', icon: 'none'});
          return;
        }
        this.$refs.listRef.queryParam.startTime = startDate
        this.$refs.listRef.queryParam.endTime = endDate
      }
      if (this.classifyRange.length > 0) {
        this.$refs.listRef.queryParam.classifyId = this.classifyRange[0].value
      }
      if (this.shopDataIndex > 0) {
        this.$refs.listRef.queryParam.ShopName = this.shopData[this.shopDataIndex]
      }
      this.$refs.listRef.loadData(1)
      this.$refs.filterPopup.close();
    }
  },
  onReady() {
    /* 排序参数 */
    const systemInfo = uni.getSystemInfoSync()
    this.windowWidth = systemInfo.windowWidth
    this.windowHeight = systemInfo.windowHeight
    if(this.$refs.listRef){
      this.$refs.listRef.queryParam.classifyName  = this.classifyName
      this.$refs.listRef.searchQuery()
    }
  },
  async onLoad(option) {
    if (option.classifyName) {
      this.classifyName = option.classifyName
      console.log("staff",this.classifyName )
    }
  },
}
</script>
<style>
.uni-container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  flex: 1;
  background-color: #fff;


}

.uni-navbar-top {
  background-image: linear-gradient(0deg, #ff887c 0%, #f4353c 100%),
  linear-gradient(#efefef, #efefef);
}

.popup-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  margin: 10px 0;
  background-color: #f8f8f8;
  border-radius: 8px;

  &:first-child {
    margin-top: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.popup-text {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

/* 标签栏间距优化 */
.uni-padding-wrap {
  padding: 20rpx 30rpx;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* 新增关键样式 */
.centered-popup {
  width: 80%;
  background: #fff;
  border-radius: 16rpx;
  /* 水平居中关键代码 */
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* 垂直居中关键代码 */
  top: 50%;
  transform: translateY(-50%);
  /* 兼容写法 */
  transform: translate(-50%, -50%);

  .clear-container {
    display: flex;
    justify-content: flex-end;
    padding: 20rpx 40rpx 0;
  }

  .clear-container .label {
    color: #666;
    font-size: 28rpx;
  }

  .time-range {
    display: flex;
    gap: 30rpx;
    padding: 40rpx;

    .label {
      width: 120rpx;
      font-size: 28rpx;
      color: #333;
      flex-shrink: 0;
    }

    .input-container {
      flex: 1;
      min-width: 0;

      .form-picker {
        .picker-content {
          display: flex;
          align-items: center;
          justify-content: end;
          height: 80rpx;
          padding: 0 20rpx;
          border-radius: 8rpx;

          .value-text {
            color: #999;
            font-size: 28rpx;
            text-align: right;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          uni-icons {
            flex-shrink: 0;
            margin-left: 16rpx;
          }
        }
      }
    }
  }

  .action-buttons {
    display: flex;
    justify-content: space-between;
    padding: 0 40rpx 40rpx;
    gap: 30rpx;
  }

  .cancel-btn,
  .confirm-btn {
    flex: 1;
    height: 80rpx;
    border-radius: 12rpx;
  }
}


.list-container {
  /* 关键修改：让列表容器占据剩余空间 */
  flex: 1;
  min-height: 0; /* 防止内容溢出 */
  overflow: hidden;
}
</style>
